<template>
  <lc-chart-heat-map
    ref="heatMapRef"
    :options="heatMapOptions"
    :map-options="heatMapMapOptions"
    :data="heatMapData"
    style="--height: 300px"
  ></lc-chart-heat-map>
</template>

<script setup>
import { ref } from "vue";

import { request } from "@/apis/request";
defineOptions({
  name: "HeatMap",
});

const heatMapRef = ref(null);
const heatMapData = ref([]);
const heatMapMapOptions = ref({});
const heatMapOptions = ref({
  title: { text: "", top: 10, left: 10 },
  grid: {
    left: "6%",
    top: "20%",
    right: "5%",
    bottom: "10%",
    containLabel: true,
  },
  xAxis: { name: "", type: "category", axisLabel: { formatter: "{value}" } },
  yAxis: { name: "", type: "category", axisLabel: { formatter: "{value}" } },
  tooltip: {},
  visualMap: {
    min: 0,
    max: 1,
    calculable: true,
    realtime: false,
    inRange: {
      color: [
        "rgba(62, 115, 241, 1)",
        "rgba(72, 192, 179, 1)",
        "rgba(123, 185, 44, 1)",
        "rgba(254, 216, 49, 1)",
        "rgba(243, 113, 50, 1)",
        "rgba(240, 54, 62, 1)",
        "rgba(250, 97, 102, 1)",
        "rgba(151, 96, 226, 1)",
      ],
    },
  },
  series: [
    {
      name: "热力图",
      type: "heatmap",
      emphasis: { itemStyle: { borderColor: "#333", borderWidth: 1 } },
      progressive: 1000,
      animation: false,
    },
  ],
});

const getHeatMapData = async () => {
  try {
    let params = { url: "", method: "get", params: {} };
    const res = await request(params);
    if (res) {
      heatMapData.value = res.data || [];
    }
  } catch (e) {
    console.error("获取数据出错: " + e);
  }
};
getHeatMapData();
</script>
